<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>朋友圈圈</title>
  <link rel="stylesheet" href="./css/zui.css">
  <link rel="stylesheet" href="./css/nav.css">
</head>
<style>
    @media screen and (max-width:1200px) {
        .content {
            display: block !important;
        }
        .content>div:last-child{
            width: 100% !important;
            margin-top: 20px;
        }
        .content>div:first-child{
            margin: 0 auto;
        }
    }
    .content{
        display: flex;
        justify-content: space-between;
    }
    .content>div:first-child{
        width: 200px;
        height: 200px;
        background-color: #ddf4df;
        text-align: center;
        padding: 20px 0;
        box-sizing: border-box;
        border-radius: 5px;
    }
    .content>div:last-child{
        width: 80%;
    }
    .header_user{
        height: 100px;
        width: 100px;
        border-radius: 50%;
    }
    h5{
        font-size: 19px;
    }
    .nodata{
        width: 100%;
        text-align: center;
        color: #b4b4b4;
    }
</style>
<body>
  <div class="header">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- 导航头部 -->
        <div class="navbar-header">
          <!-- 移动设备上的导航切换按钮 -->
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!-- 品牌名称或logo -->
          <a class="navbar-brand" href="/">北游前端论坛</a>

        </div>
        <!-- 导航项目 -->
        <div class="collapse navbar-collapse navbar-collapse-example">
          <ul class="nav navbar-nav navbar-right">
            <li class="send"><a href="javascript:;"><i class="icon icon-plus"></i> 发表</a></li>
            <li class="login"><a href="./login.html"><i class="icon icon-user"></i> 登录</a></li>
            <li class="dropdown" id="user">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon icon-user"></i> <span
                  class="user">admin</span> <b class="caret"></b></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="./upload.html">上传头像</a></li>
                <li><a href="">我的论坛</a></li>
                <li class="out"><a href="javascript:;">退出</a></li>

              </ul>
            </li>
            <li>
              <img src="" alt="头像" class="user_logo">
            </li>
          </ul>
        </div>
    </nav>
  </div>
  <main>
    <div class="content">
        <div>
            <img src="" alt="头像" class="header_user">
            <h5>admin</h5>
            <div>
                <span class="label label-success">共0篇</span>
            </div>
        </div>
        <div class="main">
         
        </div>
    </div>
  </main>

</body>
<script src="./js/jquery.js"></script>
<script src="./js/zui.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/template.js"></script>
<script id="msg" type="text/html">
    {{each data as item index}}
    <div class="panel panel-success">
      <div class="panel-heading">
          <img src="{{item.header}}" alt="头像" class="img_logo"  onclick="gomymsg('{{item.username}}')">  <span>{{item.username}}</span> &nbsp;&nbsp;<span>{{item.time}}</span>
      </div>
      <div class="panel-body">
        <div>
          {{item.content}}
        </div>
      {{if item.pinglun.length !=0}}
      <div class="dot">
        <h5>
          评论列表:
        </h5>
        {{each item.pinglun as value i}}
         <div class="pinglun_list">
           <div>
            <img src="{{value.header}}" alt="头像" class="img_logo"  onclick="gomymsg('{{value.username}}')">
           </div>
           <div class="plmsg">
              <p class="pl_username">{{value.username}}</p>
               <p class="pl_content">{{value.content}}</p>
               <p class="pl_time">{{value.time}}</p>
           </div>
         </div>
         {{/each}}
      </div>
      {{/if}}
  
      </div>
    </div>
    {{/each}}
    {{if data.length == 0}}
    <div class="nodata">
        暂无论坛~~~
    </div>
    {{/if}}
  </script>
<script>
  // 判断当前用户的登录状态
  let username = $.cookie("username")
  if (username) {
    $(".login").hide();
    $("#user").show();
    $(".user_logo").show();
    $(".user").text(username)
    getHeader();
  } else {
    $(".login").show();
    $("#user").hide();
    $(".user_logo").hide();
  }

  function getHeader() {
    $.ajax({
      url: "/get/user",
      method: "get",
      success: (res) => {
        console.log(res)
        // 修改标签的属性
        $(".user_logo").attr("src", res.data)
        // 将获取到的头像存储到sessionstorge中
        sessionStorage.setItem("header", res.data)
      }
    })
  }

  // 退出登录
  $(".out").click(function () {
    let isOut = confirm("您确定要退出吗？")
    if (isOut) {
      //  删除cookie退出登录
      $.removeCookie("username")
      //  刷新页面
      location.reload();
    }
  })
  // 点击发表跳转页面
  $(".send").click(function () {
    //判断当前是否含有cookie 若存在则证明已登录跳转
    if (username) {
      window.location.href = './sendmsg.html'
    } else {
      window.location.href = './login.html'
    }
  })
  
//   获取页面路径的参数
// split 将字符串分割成数组
let user = location.href.split("=")[1];
// 将汉字解码   
user = decodeURI(user);
// encodeURI () 将汉字转码
//decodeURI() 将汉字解码
console.log(user)
$("h5").text(user)
$.ajax({
    url:"/get/user/msg",
    method:"post",
    data:{
        username:user
    },
    success(res){
        console.log(res)
        $(".header_user").attr("src",res.userheader)
        $(".label-success").text(`共${res.data.length}篇`)
        res.loginname = $.cookie("username");
        console.log(res)
        let html = template("msg",res);
        $(".main").html(html)
    }
})
 

  

</script>

</html>